<template>
  <!-- 智能主煤流 -->
  <div class="coalFlow">
    <layout-box :is-leave="isLeave">
      <!-- 页面左侧 -->
      <div slot="left" class="left">
        <left />
      </div>
      <!-- 页面右侧 -->
      <div slot="right" class="right">
        <right />
      </div>
    </layout-box>
    <div class="cont">
      <div
        v-for="(v, bottom) in bottomlist"
        :key="bottom"
        @click="bottFun(v)"
        :class="{ titlecolor: v.type == true }"
      >
        <img :src="v.type == true ? v.activeImg : v.img" alt="" />
        {{ v.name }}
      </div>
    </div>
  </div>
</template>

<script>
// 左右分栏布局
import LayoutBox from '@/components/LayoutBox.vue';
// 引入左右两栏模块
import left from './left.vue';
import right from './right.vue';
export default {
  components: {
    LayoutBox,
    left,
    right
  },
  data() {
    return {
      current: Number,
      isLeave: false,
      time: null,
      bottomlist: [
        {
          img: require('@/assets/img/monitor/icon-32.png'),
          activeImg: require('@/assets/img/monitor/icon-29.png'),
          name: '硐室',
          sceneName: 'YJYL_DS',
          type: true
        },
        {
          img: require('@/assets/img/monitor/icon-33.png'),
          activeImg: require('@/assets/img/monitor/icon-30.png'),
          name: '避灾',
          sceneName: 'YJYL_BZ',
          type: true
        }
      ]
    };
  },
  methods: {
    bottFun(item) {
      item.type = !item.type;

      this.$store.dispatch('postToEngine', { sceneName: item.sceneName, data: item.type });
    }
  },
  // 页面的退场动画
  beforeRouteLeave(to, from, next) {
    this.isLeave = true;
    this.time = setTimeout(() => {
      next();
    }, 1000);
  },
  beforeDestroy() {
    clearTimeout(this.time);
    this.time = null;
  }
};
</script>

<style lang='scss' scoped>
.left {
  overflow: hidden;
  height: 61.25rem;
}
.right {
  height: 61.25rem;
  overflow: hidden;
}
.cont {
  display: flex;
  position: fixed;
  left: calc(50% - 55px);
  bottom: 57px;
  z-index:2;
  .titlecolor {
    color: rgba(0, 253, 255, 100);
  }
  div {
    display: flex;
    color: rgba(216, 216, 216, 100);
    font-size: 14px;
    height: 50px;
    width: 6.5625rem;
    align-items: center;
    background-color: rgba(16, 16, 16, 0.5);
    justify-content: center;
    cursor: pointer;
    img {
      width: 1.25rem;
      height: 1.25rem;
      margin-right: 10px;
      cursor: pointer;
    }
  }
}
</style>
